<template>
  <li
    :class="{ active: activeSection === itemText }"
    @click="handleClick"
    class="sidebar-item"
  >
    {{ itemText }}
  </li>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 声明组件接收的props
const props = defineProps({
  itemText: { type: String, required: true },
  activeSection: { type: String, required: true }
});

// 定义组件要触发的事件
const emit = defineEmits(['item-click']);

// 处理点击事件的方法
const handleClick = () => {
  emit('item-click', props.itemText);
};
</script>

<style scoped>
.sidebar-item {
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-left: 3px solid transparent;
  font-size: 16px;
}
.sidebar-item:hover,
.sidebar-item.active {
  background-color: #0056b3;
  border-left: 3px solid white;
}
</style>